<template>
	<view class="container">

		<view class="header">
			<view class="header-input" @click="goto.search()">
				<icon type="search" :size='13' color='#888'></icon>
				<input confirm-type="search" :placeholder="keys || '搜索您想要的'" :focus="true" auto-focus
					placeholder-class="header-input-holder" class="header-input-box" />
			</view>
		</view>

		<view class="flex flex-wrap">
			<view class="tn-w-1-3 tn-mt relative" v-for="(g, i) in list" :key="i">
				<view class="flex-y flex-center" @click="goto.goods(g.code)">
					<uv-image :src="g.cover" height="205rpx" width="205rpx" radius="10rpx" :lazy-load="true" />
					<view style="position:absolute;top:0;right:5rpx;zoom:0.7">
						<uv-tags v-if="g.level_upgrade == 0" text="入会礼包" size="mini" />
						<uv-tags v-if="g.level_upgrade > 0" :text="`升级VIP${g.level_upgrade}`" type="error" size="mini" />
					</view>
					<view class="tn-text-sm tn-text-center tn-mt-xs">
						<text class="tn-text-ellipsis-1">{{ g.name }}</text>
						<view class="tn-red_text tn-text-bold">
							<uv-text mode='price' :align="`center`" type="error" :text="g.price_selling" />
						</view>
					</view>
				</view>
			</view>
		</view>


		<view v-if="list.length < 1" style="padding:300rpx 0">
			<uv-empty mode="list" text="暂无数据~" icon="/static/imgs/empty/car.png" />
			<view class="tn-mt-xl flex-center">
				<uv-button @click="goto.home()" text="去首页" />
			</view>
		</view>

		<view v-else class="tn-mt-xl">
			<uv-load-more :status="more" @loadmore="loadData" />
		</view>

	</view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaDataBase, TaDataGoods, TaDataActionSearch } from '@/utils';

export default defineComponent({
	data() {
		return {
			keys: <string>"",
			page: <number>0,
			more: <any>'loadmore',
			list: <any[]>[],
		}
	},
	onLoad(options: any) {
		this.keys = options.keys || '';
	},

	onReady() {
		this.loadData()
		TaDataBase.page('首页', true)
	},
	onReachBottom() {
		if (this.more === 'loadmore') {
			this.loadData()
		}
	},
	onPullDownRefresh() {
		this.loadData(true)
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		// 加载地址
		loadData(force: boolean = false) {
			if (force) {
				this.page = <number>0
				this.list = <any[]>[]
			}
			TaDataGoods.withGoods('', '', this.keys).then((ret: any) => {
				if (ret.data.list.length > 0) {
					this.more = 'loadmore'
					this.page = ret.data.page.current || 0
					this.list = this.list.concat(ret.data.list)
					TaDataActionSearch.set(this.keys)
				}
				if (ret.data.page.total <= this.list.length) {
					this.more = 'nomore'
				} else if (this.list.length <= 0) {
					this.more = 'empty'
				}
			})
		}
	}
})
</script>

<style scoped lang="scss">
@import "./search.scss";
</style>